<template>
  <!-- 展开收起 -->
  <div class="elementCollapse anim box1">
    <div class="collapseBoxMain">
      <slot name="normal">正常内容</slot>

      <div v-show="show" class="anim">
        <slot name="expand">展开内容</slot>

      </div>
    </div>

    <span class="collapseBtnCont">
      <span v-if="show" class="collapseBtn f-cp f-tac f-fs14 f-bt shouqiButton" @click="onClose()">
        <slot name="normalText">正常内容</slot>
      </span>
      <span v-if="!show" class="collapseBtn f-cp f-tac f-fs14 f-bt zhankaiButton" @click="onExpand()">
        <slot name="expandText">正常内容</slot>
      </span>
    </span>

  </div>
</template>

<script>
export default {
  components: {},
  props: {

    show: {
      type: Boolean,
      default: false
    },

  },
  data() {
    return {

    }
  },
  created() { },
  mounted() { },
  methods: {
    onClose: function () {
      this.$emit('update:show', false); // 双向绑定数据改变,update必须结合v-model
    },
    onExpand: function () {
      this.$emit('update:show', true); // 双向绑定数据改变,update必须结合v-model

    }
  },
  computed: {

  },
  destoryed() { },
}

</script>

<style lang='css' scoped>
/* .router-slid-enter-active, .router-slid-leave-active {
    transition: all .4s;
  }
  .router-slid-enter, .router-slid-leave-active {
    transform: translate3d(0, 3rem, 0);
    opacity: 0;
  } */

/* .anim {
    transition: background 0.5s;
  } */

/* .box1 {
    width: 300px;
    height: 20px;
    transition: height 0.3s;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.05);
  }

  .box1:hover {
    height: 300px;
  } */
</style>